<template>
	<div class="personnelList">
		<el-breadcrumb separator="/" class="ml_5">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-diaodu fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>调度中心</el-breadcrumb-item>
			<el-breadcrumb-item>暂不发单店铺</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15">
			<div class="py_5 px_10">
				<el-row>
					<el-col :span="4">
						<el-button type="success" class="fl" @click="goToAdd()" round size="mini">新增</el-button>
					</el-col>
					<el-col :span="20">
						<el-form :inline="true" :model="ruleForm" class="form-inline fr" @keyup.enter.native="shearchBtn()">
							<el-form-item class="w_130">
								<el-autocomplete
									class="inline-input"
									v-model="shop_name"
									:fetch-suggestions="querySearch"
									placeholder="店铺名称"
									:trigger-on-focus="true"
									@select="handleSelect"
								></el-autocomplete>
							</el-form-item>
							<el-form-item class="w_110">
								<el-autocomplete
									class="inline-input"
									v-model="area_name"
									:fetch-suggestions="querySearch4"
									placeholder="商圈名称"
									:trigger-on-focus="true"
									@select="handleSelect4"
								></el-autocomplete>
							</el-form-item>
							<el-form-item class="w_100">
								<el-select v-model="shop_status" placeholder="状态">
									<el-option label="正常" value="1"></el-option>
									<el-option label="作废" value="2"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item prop="date1">
								<el-date-picker
									size="mini"
									type="date"
									class="w_90i"
									value-format="yyyy-MM-dd"
									format="MM-dd"
									:clearable="false"
									placeholder="开始日期"
									v-model="ruleForm.date1"
								></el-date-picker> </el-form-item
							>~
							<el-form-item prop="date2">
								<el-date-picker
									size="mini"
									type="date"
									class="w_90i"
									value-format="yyyy-MM-dd"
									format="MM-dd"
									:clearable="false"
									placeholder="结束日期"
									v-model="ruleForm.date2"
								></el-date-picker>
							</el-form-item>
							<el-button size="mini" type="primary" native-type="button" class="round-right" @click="shearchBtn"
								>搜索</el-button
							>
							<el-button size="mini" round @click="resetBtn">重置</el-button>
						</el-form>
					</el-col>
				</el-row>
			</div>
			<div class="tableMaxBox">
				<template>
					<el-table :data="shopList" stripe>
						<el-table-column prop="id" label="序号" width="80px" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ $index + 1 }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="name" label="店铺名称" width="210px">
							<template slot-scope="{ row, $index }">
								<span class="pointer u text-primary" @click="goToTag(row)">{{ row.shop_name }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="contact_phone" label="负责人手机号" width="120px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.contact_phone }}</span>
							</template>
						</el-table-column>
						<el-table-column prop="area_name" label="商圈" width="110"></el-table-column>
						<el-table-column prop="start_date" label="暂停开始日期" width="150px"></el-table-column>
						<el-table-column prop="end_date" label="暂停结束日期" width="150px"></el-table-column>
						<el-table-column prop="business_director" label="销售" width="140px"></el-table-column>
						<el-table-column prop="business_phone" label="销售电话" width="120px">
							<template slot-scope="{ row, $index }">
								<span>{{ row.business_phone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="来源" width="80" align="center">
							<template slot-scope="{ row, $index }">
								<span>{{ row.origin_name }}</span>
							</template>
						</el-table-column>
						<el-table-column label="状态" width="80">
							<template slot-scope="{ row, $index }">
								<span v-if="row.status == '1' || row.status == '2'">正常</span>
								<span v-if="row.status == '3'">已作废</span>
							</template>
						</el-table-column>

						<el-table-column prop="add_time" label="操作时间" width="150px"></el-table-column>
						<el-table-column prop="creater_name" label="操作人"></el-table-column>
						<el-table-column label="操作" width="90px" fixed="right">
							<template slot-scope="{ row, $index }" v-if="row.status != '3'">
								<el-link type="primary" class="InfoFont text-success" :underline="false" @click="editBtn(row, $index)"
									>编辑</el-link
								>
								<el-link
									type="danger"
									class="InfoFont text-success"
									:underline="false"
									@click="stopBtn(row, $index)"
									v-if="row.status != '3'"
									>作废</el-link
								>
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页组件 -->
					<page :total="total" :pageNums="pageNum" @pagedata="onChildValue"></page>
				</template>
			</div>
		</div>
		<!-- 作废-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="StateShowStop" width="560px" :close-on-click-modal="false">
			<div class="auditCentent">
				<span>确定要作废该条记录吗？</span>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="addMenuBtn()">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
		<!-- 暂定发单-弹框 -->
		<el-dialog :title="diaTitle" :visible.sync="TaskSignIn" width="600px" :close-on-click-modal="false">
			<div class="auditCentent">
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>店铺名称</div>
					<div class="fl list-cont bb">
						<el-autocomplete
							class="inline-input"
							v-model="stopMessage.stop_shop_name"
							:fetch-suggestions="querySearch_stop"
							placeholder="店铺名称"
							:trigger-on-focus="true"
							@select="handleSelect_stop"
						></el-autocomplete>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>暂停开始日期</div>
					<div class="fl list-cont bb">
						<el-date-picker
							v-model="stopMessage.stop_start_date"
							type="date"
							value-format="yyyy-MM-dd"
							format="MM-dd"
							placeholder=""
						></el-date-picker>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>暂停结束日期</div>
					<div class="fl list-cont bb">
						<el-date-picker
							v-model="stopMessage.stop_end_date"
							type="date"
							value-format="yyyy-MM-dd"
							format="MM-dd"
							placeholder=""
						></el-date-picker>
					</div>
				</div>
				<div class="row-info clear">
					<div class="fl title-key"><i class="lhadmin lhadmin-wujiaoxing"></i>备注</div>
					<div class="fl list-cont b_sj">
						<el-input type="textarea" :rows="6" :cols="30" placeholder="" v-model="stopMessage.remark"></el-input>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="btnOK mr_20" @click="suspend()">确 定</span>
				<span class="resetBtn" @click="hiddenRY">取 消</span>
			</div>
		</el-dialog>
		<!-- 暂停期间该店铺有以下用工需求，请先取消以下任务 -->
		<el-dialog :title="diaTitle" :visible.sync="ConflictShow" width="560" :close-on-click-modal="false">
			<div class="auditCentent">
				<p style="font-size: 13px; font-weight: 700; height: 30px; color: #303133; margin-bottom: 10px;">
					创建失败，暂停期间该店铺有以下用工需求，请先取消以下任务
					<span class="u text-primary pointer" @click="goToList()">去取消</span>
				</p>
				<el-table :data="conflictList">
					<el-table-column prop="sn" label="任务编号">
						<template slot-scope="{ row, $index }">
							<span class="u text-primary pointer" @click="goToMore(row)">{{ row.task_sn }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="job_name" label="任务名称">
						<template slot-scope="{ row, $index }">
							<span class="u text-primary pointer" @click="goToMore(row)"
								>{{ row.job_name }}&nbsp;&nbsp;{{ row.hour_expect }}h</span
							>
						</template>
					</el-table-column>
					<el-table-column prop="start_time" label="任务开始/结束时间">
						<template slot-scope="{ row, $index }">
							<span>{{ row.start_time }} - {{ row.end_time }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="status" label="状态">
						<template slot-scope="{ row, $index }">
							<span class="text-success" v-if="row.status == '10'">待分配</span>
							<span class="text-primary" v-if="row.status == '20'">已分配</span>
							<span class="text-gray" v-if="row.status == '30'">已确认</span>
							<span class="text-warning" v-if="row.status == '40'">已签到</span>
							<span class="text-warning" v-if="row.status == '50'">已完成</span>
							<span class="text-default" v-if="row.status == '60'">已撤回</span>
							<span class="text-danger" v-if="row.status == '70'">已取消</span>
							<span class="text-success" v-if="row.status == '80'">已结算</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div slot="footer" class="dialog-footer">
				<span class="resetBtn" @click="ConflictShow = false">关闭</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
import { mainfun } from '../../../assets/js/main.js'

import {
	fetchShopList,
	fetchAreaList,
	queryTaskList,
	fetchPauseShopInfo,
	batchPauseShop,
	fetchPauseList,
	setPauseShopInfo,
	createPauseShop
} from '@/api/shop.js'
export default {
	name: 'ShopList',
	data() {
		return {
			ids: '',
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			url: common.url,
			head_url: common.head_url,
			//搜索对应值
			shop_id: '', //店铺id
			shop_sn: '', //店铺sn
			shop_name: '', //店铺名
			shop_status: '1', //状态
			area_id: '', //商圈ID
			area_name: '', //商圈name
			ruleForm: {
				date1: '', //开始时间
				date2: '' //结束时间
			},

			shopList: [], //店铺列表
			shopList2: [], //搜索栏目的店铺列表
			conflictList: [],
			diaTitle: '', //弹框title
			StateShowStop: false,
			TaskSignIn: false,
			ConflictShow: false,
			stopMessage: {
				stop_shop_name: '',
				stop_shop_id: '',
				stop_shop_sn: '',
				stop_shop_area_id: '',
				stop_start_date: '',
				stop_end_date: '',
				remark: ''
			},
			//向分页组件传值
			total: 0,
			pageNum: '',
			pageSizeNow: ''
		}
	},
	created() {
		this.getShopList() //搜索栏目的店铺列表
		this.listArea()
		// this.ruleForm.date1 = this.date(0)
		// this.ruleForm.date2 = this.date(1)
	},
	mounted() {},
	methods: {
		date(e) {
			return this.$moment().add('days', e).format('YYYY-MM-DD')
		},
		async getShopList() {
			try {
				let ret = await fetchShopList({
					sign_status: 30,
					status: 1,
					fields: 'id,name,shop_sn,area_id'
				})

				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList2 = ret.list
				} else {
					this.shopList2 = []
				}
			} catch (err) {}
		},
		//新增暂停发单
		goToAdd() {
			this.diaTitle = '新增暂停发单'
			this.TaskSignIn = true
		},
		//作废按钮
		stopBtn(row) {
			this.diaTitle = '温馨提示'
			this.StateShowStop = true
			this.ids = row.id
		},
		//修改暂停发单
		editBtn(row) {
			this.diaTitle = '修改暂停发单'
			this.TaskSignIn = true
			this.ids = row.id
			//获取详情
			this.getPauseShopInfo(row.id)
		},
		async getPauseShopInfo(ids) {
			try {
				let ret = await fetchPauseShopInfo({
					id: ids
				})

				this.stopMessage.stop_shop_name = ret.shop_name
				this.stopMessage.stop_shop_id = ret.shop_id
				this.stopMessage.stop_shop_sn = ret.shop_sn
				this.stopMessage.stop_shop_area_id = ret.area_id
				this.stopMessage.stop_start_date = ret.start_date
				this.stopMessage.stop_end_date = ret.end_date
				this.stopMessage.remark = ret.remark
			} catch (err) {}
		},
		//作废确认
		async addMenuBtn() {
			try {
				let ret = await batchPauseShop({
					id: this.ids
				})
				this.$message.success('作废成功')
				this.hiddenRY()
				this.listShop()
			} catch (err) {}
		},
		async listArea() {
			//获取商圈列表
			try {
				let ret = await fetchAreaList()
				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.area_name
					})
					this.areaList = ret.list
				} else {
					this.areaList = []
				}
			} catch (err) {}
		},
		async listShop() {
			//暂不用工列表
			try {
				if (!this.shop_name) {
					this.shop_sn = ''
				}
				if (!this.area_name) {
					this.area_id = ''
				}
				var ruleForm_date1 = ''
				var ruleForm_date2 = ''
				if (!this.ruleForm.date1) {
					this.ruleForm.date1 = ''
				}
				if (!this.ruleForm.date2) {
					this.ruleForm.date2 = ''
				}
				if (this.ruleForm.date1 != '' && this.ruleForm.date2 != '') {
					//开始时间与结束时间必须同时存在
					ruleForm_date1 = this.ruleForm.date1
					ruleForm_date2 = this.ruleForm.date2
				}
				let ret = await fetchPauseList({
					pageSize: this.pageSizeNow,
					page: this.pageNum,
					shop_sn: this.shop_sn,
					status: this.shop_status,
					area_id: this.area_id,
					start_date: ruleForm_date1,
					end_date: ruleForm_date2
				})

				if (ret.list.length) {
					ret.list.forEach(item => {
						item.value = item.name
					})
					this.shopList = ret.list
					this.total = ret.count
				} else {
					this.shopList = []
					this.total = 0
				}
			} catch (err) {}
		},
		//相关的用工需求
		async getconflictList() {
			let ret = await queryTaskList({
				shop_id: this.stopMessage.stop_shop_id,
				status: '',
				time_type: '2', //任务开始时间
				start_time: this.stopMessage.stop_start_date + ' 00:00:00',
				end_time: this.stopMessage.stop_end_date + ' 23:59:00'
			})

			if (ret.list.length) {
				this.conflictList = ret.list
			} else {
				this.conflictList = []
			}
		},
		//跳转任务详情
		goToMore(row) {
			const { href } = this.$router.resolve({
				path: '/roleMain',
				query: {
					rl_id: row.demand_id,
					rl_sn: row.demand_sn,
					task_id: row.id,
					task_sn: row.task_sn,
					start_date: row.start_date
				}
			})
			window.open(href, '_blank')
		},
		//跳转任务列表
		goToList() {
			const { href } = this.$router.resolve({
				path: '/tasklist',
				query: {
					shop_id: this.stopMessage.stop_shop_id,
					shop_name: this.stopMessage.stop_shop_name,
					start: this.stopMessage.stop_start_date + ' 00:00:00',
					end: this.stopMessage.stop_end_date + ' 23:59:00'
				}
			})
			window.open(href, '_blank')
		},
		// 提交
		async suspend() {
			if (!this.stopMessage.stop_shop_name) {
				this.$message.error('店铺名称不可为空！')
				return false
			}

			if (!this.stopMessage.stop_start_date) {
				this.$message.error('请选择暂停开始时间！')
				return false
			}

			if (!this.stopMessage.stop_end_date) {
				this.$message.error('请选择暂停结束时间！')
				return false
			}

			if (!this.stopMessage.remark) {
				this.$message.error('备注不可为空！')
				return false
			}

			try {
				let ret = ''
				let stopMessage_obj = {
					shop_id: this.stopMessage.stop_shop_id,
					shop_sn: this.stopMessage.stop_shop_sn,
					shop_name: this.stopMessage.stop_shop_name,
					area_id: this.stopMessage.stop_shop_area_id,
					start_date: this.stopMessage.stop_start_date,
					end_date: this.stopMessage.stop_end_date,
					remark: this.stopMessage.remark
				}

				if (this.ids) {
					stopMessage_obj = {
						...stopMessage_obj,
						id: this.ids
					}
					ret = await setPauseShopInfo(stopMessage_obj)
				} else {
					ret = await createPauseShop(stopMessage_obj)
				}
				this.$message.success(`${this.ids ? '编辑' : '添加'}成功`)
				this.hiddenRY()
				this.listShop()
			} catch (err) {
				if (+err.code === 713) {
					this.diaTitle = '温馨提示'
					this.ConflictShow = true
					//查询相关用工需求
					this.getconflictList()
				}
			}
		},
		shearchBtn() {
			// 搜索
			this.pageNum = 1
			this.listShop()
		},

		resetBtn() {
			//重置
			this.resetData() //重置请求数据
			this.pageNum = 1
			this.listShop()
		},

		resetData() {
			//重置请求数据
			this.pageNum = 1
			this.shop_id = ''
			this.shop_name = ''
			this.area_id = ''
			this.area_name = ''
			this.shop_status = '1'
			// this.ruleForm.date1 = this.date(0)
			// this.ruleForm.date2 = this.date(1)
			this.ruleForm.date1 = ''
			this.ruleForm.date2 = ''
		},

		goToTag(row) {
			//跳转店铺详情
			const { href } = this.$router.resolve({ path: '/shopTag', query: { id: row.shop_id } })
			window.open(href, '_blank')
		},

		//店铺的自动完成
		querySearch(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect(item) {
			console.log(item)
			this.shop_id = item.id
			this.shop_sn = item.shop_sn
		},
		//店铺的自动完成
		querySearch_stop(queryString, cb) {
			var restaurants = this.shopList2
			var results = queryString ? restaurants.filter(this.createFilter_stop(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter_stop(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect_stop(item) {
			this.stopMessage.stop_shop_id = item.id
			this.stopMessage.stop_shop_sn = item.shop_sn
			this.stopMessage.stop_shop_area_id = item.area_id
		},
		//商圈的自动完成
		querySearch4(queryString, cb) {
			var restaurants = this.areaList
			var results = queryString ? restaurants.filter(this.createFilter4(queryString)) : restaurants
			// 调用 callback 返回建议列表的数据
			cb(results)
		},
		createFilter4(queryString) {
			return restaurant => {
				return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
			}
		},
		handleSelect4(item) {
			console.log(item)
			this.area_id = item.id
		},
		//隐藏商户弹框
		hiddenRY() {
			this.StateShowStop = false
			this.TaskSignIn = false
			this.ConflictShow = false
			this.ids = ''
			this.stopMessage.stop_shop_name = ''
			this.stopMessage.stop_shop_id = ''
			this.stopMessage.stop_shop_sn = ''
			this.stopMessage.stop_shop_area_id = ''
			this.stopMessage.stop_start_date = ''
			this.stopMessage.stop_end_date = ''
			this.stopMessage.remark = ''
		},
		//分页组件->子组件传值
		onChildValue(item) {
			this.pageNum = item[0]
			this.pageSizeNow = item[1]
			this.listShop()
		}
	}
}
</script>

<style scoped>
.search_box {
	width: 790px;
}
.auditCentent .labels {
	min-height: 100px;
}
.auditCentent .labels .labels_label {
	float: left;
	cursor: pointer;
}
.check_label {
	background: var(--purple4);
	color: #fff;
	border: none;
}
.pdf {
	width: 860px;
	height: 600px;
}
@media (max-width: 767.78px) {
	.titleBox {
		height: 40px;
	}
}

.click_state {
	cursor: pointer;
}

.JobCentent .wrap_top {
	display: flex;
	margin-right: 0px;
}

.row-info {
	margin-bottom: 10px;
}

.row-info .title-key {
	width: 95px;
}
</style>



// WEBPACK FOOTER //
// src/components/shop/ShopStop.vue